@page-prefix-cls: ~"@{css-prefix}page";

.@{page-prefix-cls} {
  font-size: @font-size-base;
  display: flex;
  &__title {
    margin-right: 18px;
    height: @height-middle;
    line-height: (@height-middle - 2px);
    // font-size: @font-size-base;
  }

  &__opts {
    height: @height-middle;
    line-height: (@height-middle - 2px);
    // font-size: @font-size-base;
    .haloe-select{
      margin: 0 8px;
      width: 50px;
      outline: none;
      &:focus-visible{
        border-color:@color-brand-primary !important;
      }
    }
  }
  &__list {
    margin-left: auto;
    display: flex;
    list-style: none;
    font-size: @font-size-middle;
  }

  &-item-jump-prev, &-item-jump-next {
    // &:after {
    //     content: "•••";
    //     display: block;
    //     letter-spacing: 1px;
    //     color: @color-complementary-22;
    //     text-align: center;
    // }
    i {
      color: #ccc;
    }
    i:first-child {
      display: none;
    }

    &:hover {
      //&:after{
      //    display: none;
      //}
      i:first-child {
        display: inline;
        // color: @primary-color;
      }
      i:last-child {
        display: none;
      }
    }
    &:active {
      i:first-child {
        color: @primary-color;
      }
    }
  }

  &-item-jump-prev:hover {
      i:after {
          content: "\e771";
          margin-left: -8px;
      }
  }

  &-item-jump-next:hover {
      i:after {
          content: "\e783";
          margin-left: -8px;
      }
  }


  &-item-jump-prev,
  &-item-jump-next{
      margin-right: 4px;
  }

  &-prev,
  &-next,
  &-item-jump-prev,
  &-item-jump-next {
      display: inline-block;
      vertical-align: middle;
      user-select: none;
      min-width: @height-middle;
      height: @height-middle;
      line-height: (@height-middle - 2px);
      list-style: none;
      text-align: center;
      cursor: pointer;
      color: #666;
      font-family: Arial;
      border: 1px solid @color-border-normal1;
      border-radius: @btn-border-radius;
      transition: all @transition-time @ease-in-out;
  }
  &-item-jump-prev,
  &-item-jump-next{
      border-color: transparent;
  }

  &-prev{
    border-right: none;
    border-radius: @border-radius-base 0 0 @border-radius-base;
  }

  &-next{
    border-left: none;
    border-radius: 0 @border-radius-base @border-radius-base 0;
  }

  &-prev,
  &-next {
      background-color:@color-bg-card;
      position:relative;
      a {
          color: @color-icon-normal2;
          font-size: 14px;
      }
      &:hover {
          // border-color: @color-border-normal1;
          border: 1px solid @color-brand-primary;
          // a {
          //     color: @color-brand-primary;
          // }
      }
      &:active {
        a {
          color: @color-brand-primary;
        }
      }
  }

  &-disabled {
    cursor: @cursor-disabled;
    // background-color: @color-bg-disable;
    background-color: @page-disabled-bg-color;
    margin-right: 1px;
    a {
      color: @page-disabled-text-color;
    }
    &:hover {
      border-color: @color-border-normal1;
      a {
        color: @page-disabled-text-color;
        cursor: @cursor-disabled;
      }
    }
  }

  &-item{
      margin:0;
      min-width: @height-middle;
      height: @height-middle;
      line-height: (@height-middle - 2px);
      border: 1px solid @page-border-color;
      text-align: center;
      color: @color-text-level3;
      border-radius: 0;
      cursor: pointer;
      a {
        color:inherit;
      }
      &:hover {
        // border-color: @color-brand-primary;
        border: 1px solid @color-brand-primary !important;
        &:not(:nth-child(2)) {
          // margin-left: -1px;
        }
      }
      &:active a {
        color: @color-brand-primary;
      }

      & + & {
        border-left:none;
      }

      &-active {
        border: 1px solid @color-brand-primary !important;
        margin-left: -1px;
        a, &:hover a {
          color: @color-brand-primary;
        }
      }
  }

  &__jump{
    margin-left:5px;
    vertical-align: middle;
    input {
      display:inline-block;
      width: 50px;
      height: @height-middle;
      margin: 0 8px;
      padding: 5px 8px;
      text-align: center;
      box-sizing: border-box;
      color:@color-text-level3;
      background-color:@color-bg-card;
      outline: none;
      border: 1px solid @color-border-normal1;
      border-radius: @btn-border-radius;
      transition: border-color @transition-time @ease-in-out;
      vertical-align: top;
      &:hover {
          border-color: @color-brand-primary;
      }
    }
    &__btn{
      margin:0 8px;
      display:inline-block;
      height:@btn-height-base;
      width:50px;
      height:@height-middle;
      line-height:(@height-middle - 2px);
      text-align:center;
      background-color:#fff;
      border-radius:@btn-border-radius;
      border:1px solid @color-border-normal1;
      color:@color-text-level3;
      &:hover{
        border-color:@color-brand-primary;
        color:@color-brand-primary;
      }
    }
  }

  &-simple {
    align-items: center;
    .haloe-select {
      width: 64px;
    }

    &-prev,
    &-next {
      a {
        color: @color-icon-normal2;
        font-size: 14px;
      }
      &:active {
        a {
          color: @color-brand-primary;
        }
      }
    }

    &-disabled {
      cursor: @cursor-disabled;
      a {
        color: #ccc;
      }
      &:hover {
        a {
          color: #ccc;
          cursor: @cursor-disabled;
        }
      }
    }

    &-prev {
      margin-right: 10px;
    }

    &-next {
      margin-left: 10px;
    }
  }
}

.@{page-prefix-cls} {

  @line-height:@btn-circle-size-small - 2px;

  &.mini &-total {
      height: @btn-circle-size-small;
      line-height: @line-height;
  }

  &.mini &-item {
      margin: 0;
      min-width: @btn-circle-size-small;
      height: @btn-circle-size-small;
      line-height: @line-height;
      border-radius: 0px;
      margin-left: -1px;
  }

  &.mini &-prev,
  &.mini &-next {
      margin: 0;
      margin-right: 1px;
      min-width: @btn-circle-size-small;
      height: @btn-circle-size-small;
      line-height: @line-height;
      a {
          i:after {
              height: @btn-circle-size-small;
              line-height: @line-height;
          }
      }
  }

  &.mini &-item-jump-prev,
  &.mini &-item-jump-next {
      height: @btn-circle-size-small;
      line-height: @line-height;
      margin-right: 0;
  }

  &.mini &__jump{
    input {
      width: 40px;
      height: @btn-circle-size-small;
    }
    &__btn{
      width:40px;
      height:@btn-circle-size-small;
      line-height:@line-height;
    }
  }
}
